<template>
  <div id="mine">
    <div class="header">
      <div style="height: 11.433333333333334rem">
        <van-image width="100%" height="100%" :src="bg"></van-image>
      </div>

      <div class="contentDiv">
        <div class="contentDiv2">
          <van-image
            width="4rem"
            height="4rem"
            :src="userInfo.avatar"
            round
            class="headerImg"
            @click="clickHeradrImage"
          ></van-image>
          <div class="name">{{userInfo.nickName}}</div>
          <div class="markTag"  v-show="userInfo.role !== 'USER'">
            <img :src="weixiugong" class="icon" />
            <div class="title">维修工</div>
          </div>
        </div>
      </div>
    </div>
    <div class="listDiv">
      <MIneListCell name="我的订单" :clickAction="clickorder" :showLine="true"></MIneListCell>
      <MIneListCell name="申请开票" :clickAction="clickfapiao" v-show="!isMaster" :showLine="true"></MIneListCell>
      <MIneListCell name="投诉建议" :clickAction="clicktousu" v-show="!isMaster" :showLine="true"></MIneListCell>
      <!--<MIneListCell name="我的消息" :clickAction="clickmessage"></MIneListCell>-->
      <MIneListCell name="设置" :clickAction="clicksetting"></MIneListCell>
    </div>

    <router-view></router-view>

  </div>
</template>

<script>
import HomeNewsDiv from "../home/components/news/HomeNewsDiv";
import MIneListCell from "./components/MIneListCell";
import {mapState, mapMutations} from 'vuex';
import {getStore} from '@/config/global'

export default {
  name: "Mine",
  data() {
    return {
      bg: require("@/images/background/mine_bg.png"),
      shezhi: require("@/images/icon/mine/shezhi.png"),
      sqkp: require("@/images/icon/mine/sqkp.png"),
      wddd: require("@/images/icon/mine/wddd.png"),
      wdxx: require("@/images/icon/mine/wdxx.png"),
      weixiugong: require("@/images/icon/mine/weixiugong.png"),
        userInfo:null
    };
  },
  components: {
    HomeNewsDiv,
    MIneListCell
  },
    computed:{
        ...mapState(['userInfo']),
        isMaster(){
            if (this.userInfo && (this.userInfo.role === 'HEADMAN' || this.userInfo.role === 'MASTER')){
                return true;
            }
            return false;
        }
    },
  methods: {
      ...mapMutations(['RESET_USER_INFO']),

    clickHeradrImage() {
      // alert("点击头像");
    },
      clicktousu(){

          this.$router.push({name:'complaintSuggestionPage'});

      },
    clickorder() {
          if (this.isMaster) {
              this.$router.push({name:'masterOrder'});

          }else {
              this.$router.push({name:'order'});
          }
    },
    clickfapiao() {
        this.$router.push({name:'invoicePage'});
    },
    clickmessage() {
      alert("点击我的消息");
    },
    clicksetting() {
        this.$router.push({name:'settingPage'});
    },
      reloadUserInfo(){
          let userInfo = JSON.parse(getStore('userInfo'));
          if(userInfo){
              this.userInfo = userInfo;
              console.log(this.userInfo);

          }
      }
  },
    created(){
      this.reloadUserInfo();
    }
};
</script>

<style scoped>
#mine {
  width: 100%;
  height: 100%;
  background-color: #f6f8fb;
}
.header {
  width: 100%;
  height: 11.433333333333334rem;
  position: relative;
}
.contentDiv {
  width: 100%;
  position: absolute;
  top: 2.933333333333333rem;
}
.contentDiv2 {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.headerImg {
  width: 4rem;
  height: 4rem;
  margin-left: 2.8rem;
}

.name {
  margin-left: 0.9rem;
  height: 1.7666666666666666rem;
  font-size: 1.2666666666666666rem;
  font-family: PingFangSC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  line-height: 1.7666666666666666rem;
}
.markTag {
  display: flex;
  align-items: center;

  position: absolute;
  background-color: white;
  right: 0rem;
  width: 4.633333333333334rem;
  height: 1.6rem;
  background: white;
  border-radius: 3.3333333333333335rem 0rem 0rem 3.3333333333333335rem;
}
.icon {
  margin-left: 0.5rem;

  /*width:0.7333333333333333rem;*/
  /*height:0.9666666666666667rem;*/

  width: 1.4666666666666666rem;
  height: 1.4666666666666666rem;
}
.title {
  margin-left: -0.1rem;
  width: 2.6rem;
  height: 1.6rem;
  font-size: 0.8666666666666667rem;
  color: rgba(122, 132, 145, 1);
  line-height: 1.6rem;
  font-family: "PingFangSC-Medium";
}

.listDiv {
  position: relative;
  /*height: 16rem;*/
  background-color: white;
  margin-top: -1rem;

  border-radius: 0.8666666666666667rem 0.8666666666666667rem 0rem 0rem;
}
</style>